<template>
  <div class="order-expire">
    <div class="order-expire__title">
      <span>Expired in</span>
      <ToolTip text="this is test" />
    </div>
    <div></div>
    <SelectBase v-model="expire" :options="expireList" :min="true" />
  </div>
</template>

<script>
import ToolTip from "@/components/common/ToolTip";
import SelectBase from "@/components/common/SelectBase";
export default {
  components: {
    ToolTip,
    SelectBase,
  },
  data() {
    return {
      expire: "3D",
      expireList: [
        {
          label: "10 Minutes",
          value: "10M",
        },
        {
          label: "1 Hour",
          value: "1H",
        },
        {
          label: "1 Day",
          value: "1D",
        },
        {
          label: "3 Days",
          value: "3D",
        },
        {
          label: "7 Days",
          value: "7D",
        },
        {
          label: "30 Days",
          value: "30D",
        },
        {
          label: "3 Months",
          value: "3Month",
        },
        {
          label: "6 Months",
          value: "6Month",
        },
        {
          label: "1 Year",
          value: "1Y",
        },
        {
          label: "2 Year",
          value: "2Y",
        },
        {
          label: "3 Year",
          value: "3Y",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.order-expire {
  &__title {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 8px;

    span {
      font-size: 14px;
      font-family: "Roboto Medium";
      color: var(--color-content);
    }
  }
}
</style>
